<style>
  .message-ball {
    font-size: 20px;
    line-height: 200px;
    text-align: center;
  }
  .circle {
    transition-property: width, height, margin-left, margin-top;
    transition-duration: 2s;
    position: fixed;
    transform: translateX(-50%) translateY(-50%);
    background-color: red;
    border-radius: 50%;
  }
</style>
<button onclick="go()">Click me</button>
<script>
  /*
  这是一个用回调方法写的动画效果，先试一下效果。

  然后尝试仿照getJSON函数的修改方法，将showCircle方法改写为Promise版本的

  改写后go可以这样调用
  function go() {
    showCircle(150, 150, 100).then(function(div) {
      div.classList.add('message-ball');
      div.append("Hello, world!");
    });
  }
*/
  function showCircle(cx, cy, radius) {
    return new Promise((resolve, reject) => {
      let div = document.createElement("div");
      div.style.width = 0;
      div.style.height = 0;
      div.style.left = cx + "px";
      div.style.top = cy + "px";
      div.className = "circle";
      document.body.append(div);

      setTimeout(() => {
        div.style.width = radius * 2 + "px";
        div.style.height = radius * 2 + "px";

        div.addEventListener("transitionend", function handler() {
          div.removeEventListener("transitionend", handler);
          resolve(div);
        });
      }, 0);
    });
  }
  function go() {
    showCircle(150, 150, 100).then(function (div) {
      div.classList.add("message-ball");
      div.append("Hello, world!");
    });
  }
  
</script>
